<template>
  <div>
    <Divider orientation='center'>主类别操作</Divider>
    <div class='blog-type'>
      <Select v-model='selectedMainTypeCode' style='width:200px'>
        <Option
          v-for='mainType in mainBlogTypes'
          :value='mainType.code'
          :key='mainType.code'
          >{{ mainType.name }}</Option
        >
      </Select>
      <br />
      <br />
      <Input
        v-model='inputMainTypeName'
        placeholder='添加主类别'
        style='width: 300px'
      />

      <Button @click='addMainType'>添加</Button>
      <Button @click="deleteMainType">删除</Button>
    </div>
    <Divider orientation='center'>子类别操作</Divider>
    <div class='blog-type'>
      <Select v-model='selectedSubTypeCode' style='width:200px'>
        <Option
          v-for='subType in subBlogTypes'
          :value='subType.code'
          :key='subType.code'
          >{{ subType.name }}</Option
        >
      </Select>
      <br />
      <br />
      <Input
        v-model='inputSubTypeName'
        placeholder='添加子类别'
        style='width: 300px'
      />
      <Button @click="addSubType">添加</Button>
      <Button @click="deleteSubType">删除</Button>
    </div>
  </div>
</template>

<script>
import { AddMainBlogType, GetAllMainTypes, GetSubBlogTypes, AddSubBlogType, DeleteMainType, DeleteSubType } from '../../api/getData'
export default {
  name: 'blogTypeSetting',
  data () {
    return {
      selectedMainTypeCode: '',
      selectedSubTypeCode: '',
      mainBlogTypes: [],
      subBlogTypes: [],
      inputMainTypeName: '',
      inputSubTypeName: ''
    }
  },
  mounted () {
    this.getMainTypes()
  },
  watch: {
    selectedMainTypeCode (oldVal) {
      this.getSubTypes()
    }
  },
  methods: {
    addMainType () {
      var params = new FormData()
      params.append('typeName', this.inputMainTypeName)
      AddMainBlogType(params, (data) => {
        if (data.errorCode === 'OK') {
          this.$Message.info('添加成功')
          this.inputMainTypeName = ''
        } else {
          this.$Message.error('添加失败')
        }
      })
    },
    deleteMainType () {
      var params = new FormData()
      params.append('blogMainTypeRefid', this.selectedMainTypeCode)
      DeleteMainType(params, (data) => {
        if (data.errorCode === 'OK') {
          this.$Message.info('删除成功')
        } else {
          this.$Message.error('删除失败')
        }
      })
    },
    getSubTypes () {
      let params = {
        mainBlogRefid: this.selectedMainTypeCode
      }
      GetSubBlogTypes(params, (result) => {
        if (result.errorCode === 'OK') {
          let data = result.data
          this.subBlogTypes = []
          for (let i = 0; i < data.length; i++) {
            this.subBlogTypes.push({ code: data[i].blogSubTypeRefid, name: data[i].typeName })
          }
        }
      })
    },
    addSubType () {
      let params = new FormData()
      params.append('typeName', this.inputSubTypeName)
      params.append('blogSubTypeForeign', this.selectedMainTypeCode)
      AddSubBlogType(params, (result) => {
        if (result.errorCode === 'OK') {
          this.$Message.info('添加成功')
          this.inputSubTypeName = ''
          this.getSubTypes()
        } else {
          this.$Message.error('添加失败')
        }
      })
    },
    getMainTypes () {
      GetAllMainTypes({}, (result) => {
        window.console.log(result)
        if (result.errorCode === 'OK') {
          let data = result.data
          this.mainBlogTypes = []
          for (let i = 0; i < data.length; i++) {
            this.mainBlogTypes.push({ code: data[i].blogMainTypeRefid, name: data[i].typeName })
          }
        }
      })
    },
    deleteSubType () {
      var params = new FormData()
      params.append('blogSubTypeRefid', this.selectedSubTypeCode)
      DeleteSubType(params, (data) => {
        if (data.errorCode === 'OK') {
          this.$Message.info('删除成功')
        } else {
          this.$Message.error('删除失败')
        }
      })
    }
  }
}
</script>

<style scoped>
.blog-type {
  padding-bottom: 20px;
  height: 100px;
}
</style>
